<script setup lang="ts">
import type { IConversation, IConversationRelation } from "@src/types";
import type { Ref } from "vue";
import { computed, onMounted, ref, watch } from "vue";

import useStore from "@src/store/store";

import { PencilSquareIcon } from "@heroicons/vue/24/outline";
// import ComposeModal from "@src/components/shared/modals/ComposeModal/ComposeModal.vue";
import NoConversation from "@src/components/states/empty-states/NoConversation.vue";
import Loading1 from "@src/components/states/loading-states/Loading1.vue";
import IconButton from "@src/components/ui/inputs/IconButton.vue";
import SearchInput from "@src/components/ui/inputs/SearchInput.vue";
import FadeTransition from "@src/components/ui/transitions/FadeTransition.vue";
import ConversationsList from "@src/components/views/HomeView/Sidebar/Conversations/ConversationsList.vue";
import SidebarHeader from "@src/components/views/HomeView/Sidebar/SidebarHeader.vue";
import useServiceStore from "@src/store/serviceStore";
import ArchivedButton from "@src/components/views/HomeView/Sidebar/Conversations/ArchivedButton.vue";

const store = useStore();
const serviceStore = useServiceStore();

const keyword: Ref<string> = ref("");

const composeOpen = ref(false);

// determines whether the archive is open or not
const showComplete = ref(false); //显示已解决的对话


const conversationRelations = computed(()=>{
  if(serviceStore.conversationRelations){
    const keys = Object.keys(serviceStore.conversationRelations);
    keys.sort(function(a,b){return parseInt(a) - parseInt(b);});
    const sorted:IConversationRelation[] = [];
    keys.forEach(key => {
      const cr = serviceStore.conversationRelations[key];
      sorted.push(cr);  
    });
    return sorted;
  }else{
    return [];
  }
})

// watch([keyword, openArchive], () => {
//   if (openArchive.value) {
//     // search conversations
//     filteredConversations.value =
//       store.archivedConversations?.filter((conversation) =>
//         getName(conversation)
//           ?.toLowerCase()
//           .includes(keyword.value.toLowerCase())
//       ) || [];
//   } else {
//     // search archived conversations
//     filteredConversations.value =
//       store.conversations?.filter((conversation) =>
//         getName(conversation)
//           ?.toLowerCase()
//           .includes(keyword.value.toLowerCase())
//       ) || [];
//   }
// });

// (event) close the compose modal.
const closeComposeModal = () => {
  composeOpen.value = false;
};

// if the active conversation is in the archive
// then open the archive
onMounted(() => {
  // let conversation = store.archivedConversations.find(
  //   (conversation) => conversation.id === store.activeConversationId
  // );

  // if (conversation) openArchive.value = true;
});
</script>

<template>
  <div>
    <SidebarHeader>
      <!--title-->
      <template v-slot:title>Messages</template>

      <!--side actions-->
      <!-- <template v-slot:actions>
        <IconButton
          @click="composeOpen = true"
          aria-label="compose conversation"
          title="compose conversation"
          class="w-7 h-7"
        >
          <PencilSquareIcon
            class="w-[20px] h-[20px] text-indigo-300 hover:text-indigo-400"
          />
        </IconButton>
      </template> -->
    </SidebarHeader>

    <!--search bar-->
    <!-- <div class="px-5 xs:pb-6 md:pb-5">
      <SearchInput v-model="keyword" />
    </div> -->

    <!--conversations-->
    <div
      role="list"
      aria-label="conversations"
      class="w-full h-full scroll-smooth scrollbar-hidden"
      style="overflow-x: visible; overflow-y: scroll"
    >
      <Loading1
        v-if="store.status === 'loading'"
        v-for="item in 6"
      />

      <div v-else>
        <ArchivedButton
          :open="serviceStore.showComplete"
          @click="serviceStore.showComplete = !serviceStore.showComplete"
        />

        <div
          v-if="
            store.status === 'success' &&
            conversationRelations.length > 0
          "
        >
          <FadeTransition>
            <component
              :is="ConversationsList"
              :key="showComplete ? 'archive' : 'active'"
            />
          </FadeTransition>
        </div>

        <div v-else>
          <NoConversation v-if="conversationRelations.length === 0" />
        </div>
      </div>
    </div>

    <!--compose modal-->
    <!-- <ComposeModal :open="composeOpen" :close-modal="closeComposeModal" /> -->
  </div>
</template>
